<template>
  <div class="search-container">
    <div class="gaodeLOGO"></div>
    <input type="text" placeholder="搜索位置、公交站、地铁站等" />
    <el-popover
      placement="bottom"
      popper-style="max-width:50px"
      content="搜索"
      effect="dark"
    >
      <template #reference>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </el-popover>
    <NavigationView
      :receiveMapinstance="receiveMapinstance"
      :receivecityName="receivecityName"
    />
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import NavigationView from '../components/NavigationView.vue'

const props = defineProps({
  mapInstance: {
    type: Object,
    required: true,
  },
  receivecityName: {
    type: String,
  },
})
const map = ref(null)
const AMap = ref(null)
const receiveMapinstance = ref(null)
const receivecityName = ref('')

watch(
  () => props.mapInstance,
  (newVal) => {
    if (newVal && newVal.map && newVal.AMap) {
      map.value = newVal.map
      AMap.value = newVal.AMap
      receiveMapinstance.value = newVal
      //console.log('map',map.value)
      // console.log('AMap',AMap.value)
      // console.log('receiveMapinstance',receiveMapinstance.value)
    }
  },
  { immediate: true } // 立即执行一次
)
watch(
  () => props.receivecityName,
  (newVal, oldVal) => {
    if (newVal !== oldVal) {
      receivecityName.value = newVal
    }
  }
)
</script>

<style lang="scss" scoped>
@import 'https://at.alicdn.com/t/c/font_4946857_jx8vh2h7rko.css?spm=a313x.manage_type_myprojects.i1.9.41ec3a81WdKUGA&file=font_4946857_jx8vh2h7rko.css';

.search-container {
  position: fixed;
  top: 15px;
  left: 15px;
  display: flex;
  align-items: center;
  height: 45px;
  background-color: white;
  padding: 1px 0px 1px 3px;
  border-radius: 3px;
  z-index: 100;
  .gaodeLOGO {
    width: 34px;
    height: 34px;
    background-image: url('./gaodeLOGO.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
  input {
    border: none;
    outline: none;
    margin-left: 5px;
    width: 219px;
    height: 20px;
    color: rgb(136, 136, 136);
  }
  .icon-sousuo.el-tooltip__trigger {
    font-size: 20px;
    color: rgb(136, 136, 136);
    margin-right: 15px;
    &:hover {
      color: rgb(74, 177, 255);
      cursor: pointer;
    }
  }
}
</style>
